<%@ page contentType="text/html;utf-8" pageEncoding="utf-8" %>
<%@ page errorPage="error.jsp"%>

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" name="viewport">
    <meta name="theme-color" content="#4285f4">
    <title>登录-智慧校园卡</title>
    <!-- css -->
    <link href="css/base.min.css" rel="stylesheet">
    <link href="css/project.min.css" rel="stylesheet">
    <link href="css/auth.css" rel="stylesheet">
    <link href="css/fonts.css" rel="stylesheet">
    <!-- js -->
    <script src="js/fk.js"></script>
</head>

<body class="page-brand">

<div class="authpage">
    <div class="container">
        <form action="javascript:void(0);" method="POST">
            <div class="auth-main auth-row auth-col-one">
                <div class="auth-top auth-row">
                    <a class="boardtop-left" href="index.jsp">
                        <div>首 页</div>
                    </a>
                    <div class="auth-logo">
                        <img src="images/authlogo.jpg" alt="">
                    </div>
                    <a href="register.jsp" class="boardtop-right">
                        <div>注 册</div>
                    </a>
                </div>
                <div class="auth-row">
                    <div class="form-group-label auth-row row-login">
                        <label class="floating-label" for="username">用户名</label>
                        <input class="form-control maxwidth-auth" id="username" type="text" name="username">
                    </div>
                </div>
                <div class="auth-row">
                    <div class="form-group-label auth-row row-login">
                        <label class="floating-label" for="upwd">密码</label>
                        <input class="form-control maxwidth-auth" id="upwd" type="password" name="upwd">
                    </div>
                </div>

                <div class="btn-auth auth-row">
                    <button id="login" type="submit" class="btn btn-block btn-brand waves-attach waves-light">
                        确认登录
                    </button>
                </div>
                <div class="auth-help auth-row">
                    <div class="auth-help-table auth-row">
                        <div class="checkbox checkbox-adv">
                            <label for="remember_me">
                                <input class="access-hide" value="week" id="remember_me" name="remember_me"
                                       type="checkbox"/>记住我
                                <span class="checkbox-circle"></span>
                                <span class="checkbox-circle-check"></span>
                                <span class="checkbox-circle-icon icon">done</span>
                            </label>
                        </div>
                        <a href="#">忘记密码？</a>
                    </div>
                </div>
                <div class="auth-bottom auth-row">
                    <div class="tgauth">
                        <button class="btn" style="cursor:unset;"></button>
                    </div>
                </div>
            </div>
        </form>

            </div>
        </div>


<div aria-hidden="true" class="modal modal-va-middle fade" id="result" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-xs">
        <div class="modal-content">
            <div class="modal-inner">
                <p class="h5 margin-top-sm text-black-hint" id="msg"></p>
            </div>
            <div class="modal-footer">
                <p class="text-right">
                    <button class="btn btn-flat btn-brand-accent waves-attach" data-dismiss="modal" type="button"
                            id="result_ok">知道了
                    </button>
                </p>
            </div>
        </div>
    </div>
</div>


<footer class="ui-footer">
    <div class="container">
        &copy;2020 智慧校园卡 |
    </div>
</footer>

<!-- js -->
<script src="js/jquery-3.4.1.js"></script>
<script src="js/base.min.js"></script>
<script src="js/project.min.js"></script>

</body>
</html>

<script>
    let calltgbtn = document.querySelector('#calltgauth');
    let tgboard = document.querySelector('.card.auth-tg.cust-model');
    if (calltgbtn && tgboard) {
        custModal(calltgbtn, tgboard);
    }
</script>

<script>
    $(document).ready(function () {
        function login() {

            document.getElementById("login").disabled = true;

            $.ajax({
                type: "POST",
                url: "login.do",
                dataType: "json",
                data: {
                    username: $("#username").val(),
                    upwd: $("#upwd").val(),
                    remember_me: $("#remember_me:checked").val()                },
                success: (data) => {
                    if (data.ret === 1) {
                        $("#result").modal();
                        $$.getElementById('msg').innerHTML = data.msg;
                        window.setTimeout("location.href='findProducts.do'", 1200);
                    } else {
                        $("#result").modal();
                        $$.getElementById('msg').innerHTML = data.msg;
                        document.getElementById("login").disabled = false;
                    }
                },
                error: (jqXHR) => {
                    $$.getElementById('msg').innerHTML = `发生错误：${
                        jqXHR.status
                    }`;
                    document.getElementById("login").disabled = false;
                }
            });
        }

        $("html").keydown(function (event) {
            if (event.keyCode === 13) {
                login();
            }
        });
        $("#login").click(function () {
            login();
        });

    })
</script>
